<template>
	<div>
		<!--新增按钮-->
		<div class="add_btn_wrap">
			<el-button @click="expressCMBtn" type="primary" icon="document">快递公司管理</el-button>
		</div>
		<!-- 搜索 -->
		<div class="">
			<div class="down_search_wrap">
				<div class="search_btn_wrap" style="width: 150px;">
					<el-button @click="exportBtn" class="s_btn_up" style="width: 120px;display: block;margin-bottom: 6px;">导出</el-button>
					<el-button @click="searchBtn" type="primary" class="s_btn_down" style="width: 120px;display: block;margin: 0;">查询</el-button>
				</div>
				<div v-for="item in config.search.search_input" class="input_wrap">
					<label class="label" for="">{{item.placeholder}}：</label>
					<el-input :placeholder="'请输入'+item.placeholder" v-model="data.exchanged.search[item.name]" size="small" clearable>
					</el-input>
				</div>
				<div class="select_input_wrap" v-for="items in config.search.search_select">
					<label class="label" for="">{{items.placeholder}}：</label>
					<el-select v-model="data.exchanged.search[items.name]" :placeholder="items.placeholder" :multiple="items.multiple" :filterable="items.filterable" size="small" clearable>
						<el-option v-for="(item, index) in data.received.search[items.name]" :key="item.index" :label="item.name" :value="item.id"></el-option>
					</el-select>
				</div>
				<!-- 省市区 -->
				<div class="input_wrap">
					<label class="label" for="">地址：</label>
					<VDistpicker :province="data.exchanged.search.province" :city="data.exchanged.search.city" :area="data.exchanged.search.area" @province="onChangeProvince3" @city="onChangeCity3" @area="onChangeArea3">
					</VDistpicker>
				</div>
				<!-- 日期时间范围 -->
				<div class="riqi_wrap">
					<label class="label">时间：</label>
					<el-date-picker @change="timeChange" v-if="config.search.date" v-for="itemDate in config.search.date" v-model="data.exchanged.date[itemDate.name]" :type="itemDate.type" :range-separator="itemDate.separator" :size="itemDate.size" :start-placeholder="itemDate.placeholder+'开始'" :end-placeholder="itemDate.placeholder+'结束'" align="right" value-format="yyyy-MM-dd" clearable placeholder="选择日期">
					</el-date-picker>
				</div>
			</div>
		</div>
		<!-- 表格主体 -->
		<div class="">
			<el-table :data="data.received.table" stripe="stripe" :border='true' element-loading-text="拼命加载中" style="width: 100%">
				<template v-for="i in config.table.show.items.length">
					<el-table-column :sortable="config.table.sort[config.table.show.prop[i-1]]" :label="config.table.show.items[i-1]" :prop="config.table.show.prop[i-1]" :width="config.table.show.width[i-1]"></el-table-column>
				</template>
			</el-table>
		</div>
		<!-- 分页-->
		<div class="page_wrap">
			<page-model :data="data" :config="config.page" :dataCount="data.received.count" :limit="data.exchanged.search.limit" :currentPage="data.exchanged.search.page"></page-model>
		</div>
		<!-- 快递公司列表弹窗-->
		<el-dialog title="快递公司管理" :visible.sync="expressCompany.dialogFormVisible" center width="500px">
			<div style="padding-bottom: 10px;color: #CC0000;">
				该表格会影响各个站点快递公司的包裹录入，请慎重修改！
			</div>
			<el-table :data="expressCompany.table" stripe="stripe" :border='true' element-loading-text="拼命加载中" style="width: 100%">
				<el-table-column type="index" width="50"></el-table-column>
				<el-table-column label="快递公司" prop="name"></el-table-column>
				<el-table-column label="快递公司运输码" prop="shipperCode"></el-table-column>
				<el-table-column label="操作" v-if="config.table.operate" :width="config.table.operate.width">
					<template slot-scope="scope">
						<el-button @click="modifyBtn(scope.row)" size="small">修改</el-button>
						<el-button @click="deleteBtn(scope.row)" size="small">删除</el-button>
					</template>
				</el-table-column>
			</el-table>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="Add.dialogFormVisible = true" class="w-200">新增快递公司</el-button>
			</div>
		</el-dialog>
		<!-- 新增弹窗 -->
		<el-dialog :title="Add.config.title" :visible.sync="Add.dialogFormVisible" center width="500px">
			<div style="padding-bottom: 10px;color: #CC0000;">
				该表格会影响各个站点快递公司的包裹录入，请慎重修改！
			</div>
			<el-form ref="addform" :model="Add.data.form" :rules="Add.config.rules" label-width="180px">
				<!--<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.select">
					<el-select v-model="Add.data.form[item.prop]" :placeholder="item.placeholder" class="w-200">
						<el-option v-for="option in Add.data.selectData[item.prop]" :label="option.name" :value="option.id">
							<span style="float: left">{{ option.name }}</span>
      						<span style="float: right; color: #8492a6; font-size: 13px">{{ option.id }}</span>
						</el-option>
					</el-select>
				</el-form-item>-->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Add.config.form.input">
					<el-input v-model.trim="Add.data.form[item.prop]" class="h-40 w-200" :maxlength="255" :placeholder="item.placeholder"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="commitAdd('addform')" class="w-200">确 定</el-button>
			</div>
		</el-dialog>
		<!-- 编辑 -->
		<el-dialog :title="Edit.config.title" :visible.sync="Edit.dialogFormVisible" center width="500px">
			<div style="padding-bottom: 10px;color: #CC0000;">
				该表格会影响各个站点快递公司的包裹录入，请慎重修改！
			</div>
			<el-form ref="form" :model="Edit.data.form" :rules="Edit.config.rules" label-width="180px">
				<!--<el-form-item :label="item.label" :prop="item.prop" v-for="item in Edit.config.form.select">
					<el-select v-model="Edit.data.form[item.prop]" :placeholder="item.placeholder" class="w-200">
						<el-option v-for="option in Edit.data.selectData[item.prop]" :label="option.name" :value="option.id">
							<span style="float: left">{{ option.name }}</span>
      						<span style="float: right; color: #8492a6; font-size: 13px">{{ option.id }}</span>
						</el-option>
					</el-select>
				</el-form-item>-->
				<el-form-item :label="item.label" :prop="item.prop" v-for="item in Edit.config.form.input">
					<el-input v-model.trim="Edit.data.form[item.prop]" :placeholder="item.placeholder" class="h-40 w-200" :maxlength="255"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="commitEdit()" class="w-200">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import http from '@/assets/js/http.js'
	import pageModel from 'components/Common/page-model.vue'
	import VDistpicker from 'v-distpicker'

	export default {
		components: {
			VDistpicker,
			pageModel,
		},
		data() {
			return {
				expressCompany: {
					table: '',
					dialogFormVisible: false,
				},
				Add: {
					dialogFormVisible: false,
					data: {
						primary: '',
						form: {
							name: '',
							shipperCode: ''
						},
						selectData: {
							shipperCode: [{
								name: '圆通',
								id: 'YTO'
							}, {
								name: '中通',
								id: 'ZTO'
							}, {
								name: '百世快递',
								id: 'HTKY'
							}, {
								name: '韵达',
								id: 'YD'
							}, {
								name: '天天快递',
								id: 'HHTT'
							}, {
								name: '申通',
								id: 'STO'
							}, {
								name: '顺丰',
								id: 'SF'
							}, {
								name: '邮政快递包裹',
								id: 'YZPY'
							}, {
								name: 'EMS',
								id: 'EMS'
							}, {
								name: '邮政国内标快',
								id: 'YZBK'
							}, {
								name: '宅急送',
								id: 'ZJS'
							}, {
								name: '中铁快运',
								id: 'ZTKY'
							}, {
								name: '全一快递',
								id: 'UAPEX'
							}, {
								name: '德邦',
								id: 'DBL'
							}, {
								name: '优速',
								id: 'UC'
							}, {
								name: '远成',
								id: 'YCWL'
							}, {
								name: '安能',
								id: 'ANE'
							}, {
								name: '京东',
								id: 'JD'
							}, {
								name: '信丰',
								id: 'XFEX'
							}, {
								name: '国通',
								id: 'GTO'
							}, {
								name: '速尔快递',
								id: 'SURE'
							}, {
								name: '品骏快递',
								id: 'PJ'
							}, {
								name: '京东快运',
								id: 'JDKY'
							}, {
								name: '安能快运',
								id: 'ANEKY'
							}, {
								name: '德邦快运',
								id: 'DBLKY'
							}, {
								name: '龙邦快运',
								id: 'LB'
							}]
						}
					},
					config: {
						uploadUrl: '',
						domain: '',
						title: '新增快递公司',
						form: {
							input: [{
								prop: 'name',
								label: '快递公司名称',
								placeholder: '请输入快递公司名称',
							},{
								prop: 'shipperCode',
								label: '编码（打印面单需要）',
								placeholder: '请输入快递公司编码',
							}],
							select: [{
								label: '选择或输入快递公司',
								prop: 'shipperCode',
								placeholder: '选择相快递公司及编码',
							}]
						},
						rules: {
							//							name: [{
							//								required: true,
							//								message: '请输入快递公司名称'
							//							}],
							name: [{
								required: true,
								message: '请输入快递公司'
							}]
						}
					}
				},
				Edit: {
					dialogFormVisible: false,
					data: {
						primary: '',
						form: {
							companyId: '',
							name: '',
							shipperCode: ''
						},
						selectData: {
							shipperCode: [{
								name: '圆通',
								id: 'YTO'
							}, {
								name: '中通',
								id: 'ZTO'
							}, {
								name: '百世快递',
								id: 'HTKY'
							}, {
								name: '韵达',
								id: 'YD'
							}, {
								name: '天天快递',
								id: 'HHTT'
							}, {
								name: '申通',
								id: 'STO'
							}, {
								name: '顺丰',
								id: 'SF'
							}, {
								name: '邮政快递包裹',
								id: 'YZPY'
							}, {
								name: 'EMS',
								id: 'EMS'
							}, {
								name: '邮政国内标快',
								id: 'YZBK'
							}, {
								name: '宅急送',
								id: 'ZJS'
							}, {
								name: '中铁快运',
								id: 'ZTKY'
							}, {
								name: '全一快递',
								id: 'UAPEX'
							}, {
								name: '德邦',
								id: 'DBL'
							}, {
								name: '优速',
								id: 'UC'
							}, {
								name: '远成',
								id: 'YCWL'
							}, {
								name: '安能',
								id: 'ANE'
							}, {
								name: '京东',
								id: 'JD'
							}, {
								name: '信丰',
								id: 'XFEX'
							}, {
								name: '国通',
								id: 'GTO'
							}, {
								name: '速尔快递',
								id: 'SURE'
							}, {
								name: '品骏快递',
								id: 'PJ'
							}, {
								name: '京东快运',
								id: 'JDKY'
							}, {
								name: '安能快运',
								id: 'ANEKY'
							}, {
								name: '德邦快运',
								id: 'DBLKY'
							}, {
								name: '龙邦快运',
								id: 'LB'
							}],
						}
					},
					config: {
						uploadUrl: '',
						domain: '',
						title: '修改快递公司',
						form: {
							input: [{
								prop: 'name',
								label: '快递公司',
								placeholder: '请输入快递公司名称',
							}],
							select: [{
								label: '选择相应快递公司编码',
								prop: 'shipperCode',
								placeholder: '选择相应快递公司编码',
							}]
						},
						rules: {
							//							name: [{
							//								required: true,
							//								message: '请输入快递公司名称'
							//							}],
							name: [{
								required: true,
								message: '请输入快递公司'
							}]
						}
					}
				},
				config: {
					baseApi: 'AdminApi/userList/List',
					search: {
						search_input: [],
						search_select: [{
								name: 'companyId',
								placeholder: '快递公司',
								size: 'large',
								multiple: false,
								filterable: true,
							},
							{
								name: 'siteId',
								placeholder: '站点',
								size: 'large',
								multiple: false,
								filterable: false,
							}
						],
						date: [{
							name: 'time',
							type: 'daterange',
							separator: '-',
							size: 'small',
							placeholder: '-',
						}]
					},
					table: {
						sort: {
							storeCount: true,
							signCount: true,
							signRate: true,
							todaySignCount: true,
							todaySignRate: true,
						},
						show: {
							prop: [
								'siteName',
								'companyName',
								'storeCount',
								'signCount',
								'signRate',
								'todaySignCount',
								'todaySignRate'
							],
							items: [
								'站点',
								'快递公司',
								'入库量',
								'签收量',
								'总签收率',
								'今日签收量',
								'今日签收率'

							],
							width: []
						},
						operate: {
							width: 160,
						}
					},
					page: {
						limits: [5, 10, 20, 50, 100],
						layout: 'total, sizes, prev, pager, next, jumper'
					},
				},
				data: {
					received: {
						table: [],
						count: 10,
						search: {
							siteId: [],
							companyId: [],
						}
					},
					exchanged: {
						search: {
							limit: 10,
							page: 1,
							province: '',
							city: '',
							area: '',
							companyId: '',
							siteId: '',
							start: '',
							end: ''
						},
						multipleSelection: [],
						isDelete: 0,
						date: {
							time: '',
						}
					}
				}
			}
		},
		created() {
			this.tableData();
			this.selectData();
		},
		methods: {
			tableData() {
				let obj = this.data.exchanged.search;
				let page = obj.page - 1;
				this.apiGet("/api/backend/base/express-company/stastic/list?page=" + page + "&count=" + obj.limit + "&province=" +
						obj.province + "&city=" + obj.city + "&area=" + obj.area + "&companyId=" + obj.companyId + "&siteId=" + obj.siteId + "&start=" + obj.start + "&end=" + obj.end)
					.then(res => {
						res.data.items.map(i => {
							i.todaySignRate = i.todaySignRate.toFixed(0) + '%'
							i.signRate = i.signRate.toFixed(0) + '%'
						})
						this.data.received.table = res.data.items
						this.data.received.count = res.data.count
						_g.closeGlobalLoading();
					})
			},
			commitAdd(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						let that = this;
						this.Add.data.selectData.shipperCode.map(i => {
							if(i.id == this.Add.data.form.shipperCode) {
								this.Add.data.form.name = i.name
							}
						})
						this.apiPost("/api/backend/base/express-company/add", this.Add.data.form).then(res => {
							if(res.code == 200) {
								this.Add.dialogFormVisible = false;
								that.$message({
									type: 'success',
									message: '添加成功'
								})
								that.expressCMBtn();
							}
						})
					}
				});
			},
			//快递公司列表弹窗
			expressCMBtn() {
				this.apiGet("/api/backend/base/express-company/list").then(res => {
					if(res.code == 200) {
						this.expressCompany.table = res.data
						this.expressCompany.dialogFormVisible = true;
					}
				})
			},
			//导出按钮
			exportBtn() {
				let obj = this.data.exchanged.search;
				window.location.href = axios.defaults.baseURL + "/api/backend/base/express-company/stastic/export?province=" +
					obj.province + "&city=" + obj.city + "&area=" + obj.area + "&companyId=" +
					obj.companyId + "&siteId=" + obj.siteId + "&start=" + obj.start +
					"&end=" + obj.end;
			},
			searchBtn() {
				this.tableData();
			},
			//搜索框时间选择
			timeChange() {
				if(this.data.exchanged.date.time) {
					this.data.exchanged.search.startDate = this.data.exchanged.date.time[0]
					this.data.exchanged.search.endDate = this.data.exchanged.date.time[1]
				} else {
					this.data.exchanged.search.startDate = ''
					this.data.exchanged.search.endDate = ''
				}
			},
			//获取下拉框数据
			selectData() {
				let that = this;
				//站点字典
				this.apiGet("/api/dict/site/list", null).then(res => {
					if(res.code == 200) {
						that.data.received.search.siteId = res.data.sites
						that.Add.data.selectData.siteId = res.data.sites
						that.Edit.data.selectData.siteId = res.data.sites
					}
				})
				//快递公司
				this.apiGet("/api/dict/express-company/list", null).then(res => {
					if(res.code == 200) {
						that.data.received.search.companyId = res.data.companies
						that.Edit.data.selectData.expressCompanyId = res.data.companies
					}
				})
			},
			modifyBtn(row) {
				this.Edit.data.form.companyId = row.companyId;
				this.Edit.data.form.name = row.name;
				this.Edit.data.form.shipperCode = row.shipperCode;
				this.Edit.dialogFormVisible = true;
			},
			commitEdit() {
				let that = this;
				this.Edit.data.selectData.shipperCode.map(i => {
					if(i.id == this.Edit.data.form.shipperCode) {
						this.Edit.data.form.name = i.name
					}
				})
				this.apiPost("/api/backend/base/express-company/modify", this.Edit.data.form).then(res => {
					if(res.code == 200) {
						this.$message({
							type: 'success',
							message: '修改成功！'
						});
						this.Edit.dialogFormVisible = false;
						this.expressCMBtn();
					}
				})
			},
			deleteBtn(row) {
				let that = this;
				that.$confirm('此操作将改快递公司, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.apiPost("/api/backend/base/express-company/remove", {
						companyId: row.companyId
					}).then(res => {
						if(res.code == 200) {
							this.$message({
								type: 'success',
								message: '删除成功！'
							});
							this.expressCMBtn();
						}
					})
				}).catch(() => {

				});
			},
			onChangeProvince3(data) {
				if(data.value == '省') {
					this.data.exchanged.search.province = ''
				} else {
					this.data.exchanged.search.province = data.value;
				}
			},
			onChangeCity3(data) {
				this.data.exchanged.search.city = data.value;
			},
			onChangeArea3(data) {
				this.data.exchanged.search.area = data.value;
			}
		},
		mixins: [http]
	}
</script>
<style scoped>
	.add_btn_wrap {
		background: rgba(250, 250, 250, 1);
		padding: 10px 30px;
		text-align: right;
	}
	
	.page_wrap {
		text-align: center;
		padding: 30px;
	}
</style>
<style>
	.distpicker-address-wrapper {
		line-height: 46px;
		display: inline-block;
	}
	
	.distpicker-address-wrapper select {
		padding: 0;
		height: 32px;
		font-size: 14px;
		line-height: 1;
	}
</style>